<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>

  <fmt:setBundle basename="ApplicationMessage" />
  <fmt:setLocale value="zh_CN" />

  <%@ include file="/WEB-INF/include/meta.jsp"%>
  <%@ include file="/WEB-INF/include/css.jsp"%>
  <link href="${ctx.resource}/css/select2.css" rel="stylesheet">
  <link href="${ctx.resource}/css/select2-bootstrap.css" rel="stylesheet">
  <title>已收未确认 - 租房宝金融管理平台</title>
</head>
<body>

  <%@ include file="/WEB-INF/include/header.jsp"%>
  
  <div class="web-g-main">

    <%@ include file="/WEB-INF/include/aside.jsp"%>
    <div class="content">
      <header class="header clearfix">
          <h3 class="pull-left">已收未确认</h3>
          <form action="${ctx}/receivables/transaction-record" method="get">
	          <div class="row">
		          	<div class="col-md-3">
				         <div class="input-group input-group-sm">
				         	<span class="input-group-addon">通道</span>
				          	<select name="particalUniqueId" class="form-control">
				          		<c:forEach var="quarkPartical" items="${quarkParticals }">
				          			<option value="${ quarkPartical.uniqueParticalId}">${data.getParticalName(quarkPartical.uniqueParticalId) }</option>
				          		</c:forEach>
				          	</select>
				         </div>
		          	</div>
				     <div class="col-md-2">
				         <div class="input-group">
							<button class="btn btn-default btn-shadow btn-shadow-default demo2do-btn form-control" title="过滤查询"><i class="glyphicon glyphicon-search"></i>&nbsp;&nbsp;过滤查询</button>
						 </div>
				    </div>	
		      </div>  
          </form>
	          
       </header>

       <c:if test="${not empty infoMessage}">
            <div class="alert alert-success alert-dismissable alert-fade top-margin-10 text-align-center">
              <button type="button" class="close" data-dismiss="alert">&times;</button>
              <i class="glyphicon glyphicon-info-sign"></i>&nbsp;&nbsp;
              <fmt:message key="${infoMessage}" />
            </div>
       </c:if>

       <div class="table-area table-responsive">
           <table class="data-list  table table-striped table-hover">
              <thead>
                <tr>
                 <th>序号</th>
                  <th>订单号</th>
                  <th>交易金额</th>
                  <th>状态</th>
                   <th>合作方支付流水号</th>
                  <th>支付平台流水号</th>
                  <th>交易时间</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
              	<c:choose>
              		<c:when test="${not empty transactionRecordSketchs}">
		              	<c:forEach var="transactionRecordSketch" items="${transactionRecordSketchs}" varStatus = "status">
		                  <tr data="${transactionRecordSketch.uniqueTransactionId }">                 
		                    <td><input type="checkbox" class ="transaction-record-checkbox"/></td>
		                    <td>${transactionRecordSketch.orderNo}</td>
		                    <td><fmt:formatNumber value="${transactionRecordSketch.tranMoney}" type="currency"/></td>
		                    <td><fmt:message key="${data.getTransactionRecordStatusKey(transactionRecordSketch.tranStatus)}"/></td>
		                    <td>${transactionRecordSketch.payNo}</td>
		                    <td>${transactionRecordSketch.tradeNo}</td>
		                  	<td><fmt:formatDate value="${transactionRecordSketch.tranTime}" pattern="yyyy-MM-dd HH:mm:ss"/></td>
		                  	<td><a href="javascript:void(0)" class="paid-confirm">确认到账</a></td>
		                  </tr>
		                </c:forEach>
              		</c:when>
              		
              		<c:otherwise>
              			<tr>
              				<td>对不起，无记录</td>
              			</tr>
              		</c:otherwise>
              	</c:choose>
              </tbody>
           </table>
       </div>
        <div class="row">
				<div class="col-xs-2 col-xs-offset-8">
					<button class="btn btn-default select-all">全选/反选</button>
				</div>
				<div class="col-xs-2">
					<button class="btn btn-primary confirm-all">全部确认</button>
				</div>
		  </div>
       <%@ include file="/WEB-INF/include/footer.jsp"%>
    </div>
	    <!-- dialog begin -->
	  <div class="modal fade in bs-example-modal-sm" id="dialog" role="dialog" tabindex="-1" aria-labelledby="dialoglabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close close-dialog" aria-label="关闭" ><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title" id="dialoglabel">提示</h4>
				</div>
				<div class="modal-body">
					<p></p>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default close-dialog">关闭</button>
				</div>
			</div>
		</div>
	  </div><!-- dialog end -->
  </div>

  <%@ include file="/WEB-INF/include/script.jsp"%>
  <script src="${ctx.resource}/js/bootstrap-switch.min.js"></script>
  <script src="${ctx.resource}/js/bootstrap-modal-trigger.js"></script>
  <script src="${ctx.resource}/js/select2.min.js"></script>
  <script src="${ctx.resource}/js/select2_locale_zh-CN.js"></script>
  <script src="${ctx.resource}/js/bootstrap.validate.js"></script>
  <script src="${ctx.resource}/js/bootstrap.validate.en.js"></script>
  <script src="${ctx.resource}/js/earth-preupload.js"></script>
  <script src="${ctx.resource}/js/bootstrap-alert-fade-trigger.js"></script>
  <script>
  	$(function(){
  		
  		$('.paid-confirm').click(function(){
  			
  			var uniqueTransactionId = $(this).parents('tr').attr('data').trim();
  			
  			var particalUniqueId = $('select[name="particalUniqueId"]').val().trim();
  			
  			var array = new Array();
  			
  			array.push(uniqueTransactionId);
  			
  			confirmTransactionRecord(particalUniqueId,JSON.stringify(array));
  			
  		})
  		var confirmTransactionRecord = function(particalUniqueId,uniqueTransactionRecordIds){
  			
  			$.post('${ctx}/receivables/transaction-record-confirm',{
  				
  				particalUniqueId:particalUniqueId,
  				
  				uniqueTransactionRecordIds:uniqueTransactionRecordIds
  				
  			},function(data){
  				
  				var jsonData = $.parseJSON(data);
  				
  				resultHandler(jsonData.message,true);
  			})
  		};

		var selectCount = 0;
		
		$(".select-all").click(function(){
			
			if(selectCount % 2 == 0){
				
				$(".transaction-record-checkbox").attr("checked","checked");
			}else{
				
				$(".transaction-record-checkbox").removeAttr("checked");
			}
			selectCount++;
			
			if(selectCount % 2 == 0){
				
				window.location.reload();
			}
		});
		$('.confirm-all').click(function(){
			
			var $checkedBox  = $("input[type='checkbox']:checked");
			
			if($checkedBox.length <= 0){
				
				resultHandler("请选中要确认的交易纪录！",false);
				
				return false;
				
			}
			var particalUniqueId = $('select[name="particalUniqueId"]').val().trim();
			
			var array = new Array();
			
			$checkedBox.each(function(){
				
				var uniqueTransactionId = $(this).parents("tr").attr("data");
				
  				array.push(uniqueTransactionId);
			});
  			
  			confirmTransactionRecord(particalUniqueId,JSON.stringify(array));
			
		});
  		
  		var resultHandler = function(message,isReload){
 			 
			 $('#dialog').find('p').text(message).end().modal();
			 
			 $('#dialog .close-dialog').click(function(){
				 
				 $('#dialog').modal('hide');
				 
				 if(isReload){
				 
					 window.location.reload();
				};
			
			 });
 		 };
  	})
  </script>
</body>
</html>
